﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="List.aspx.cs" Inherits="MonkeyWarranty.Web.InstantTickets.List" %>
<%@ Import Namespace="Resources" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
    <title><%=GlobalStrings.InstantTickets %></title>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <div class="row">
        <div class="col-lg-12">
            <h3><%=GlobalStrings.InstantTickets %></h3>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-12">
            <div class="well">
                <div class="form-inline">
                    <input class="form-control" type="text" id="code" placeholder="<%=GlobalStrings.TicketNumber %>" />
                    <select class="form-control" id="status">
                        <option value="0">-- <%=GlobalStrings.Status %> --</option>
                        <option value="1">Tiếp nhận</option>
                        <option value="2">Đang xử lý</option>
                        <option value="3">Hoàn thành</option>
                    </select>
                    Ngày nhận <input type="text" id="dateCreatedFrom" class="form-control" style="width: 105px;" />-<input type="text" id="dateCreatedTo" class="form-control" style="width: 105px;" />
                    <button class="btn btn-default" type="button" id="LoadButton"><i class="fa fa-search"></i></button>
                    <button class="btn btn-default" type="button" id="ResetButton"><i class="fa fa-refresh"></i></button>
                </div>
            </div>
            
            <div id="TicketsContainer"></div>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-12">
            <p></p>
            <a class="btn btn-success" href="New.aspx"><%=GlobalStrings.InstantTickets %></a>
        </div>
    </div>
    <!-- Modal -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel">Xóa</h4>
                </div>
                <div class="modal-body" id="confirmMessage">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-primary" onclick="deleteItem()" data-dismiss="modal">Xóa</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
    <!-- /.modal -->
    
    <script type="text/javascript">
        var selectedId = 0, selectedType = 0;
        function deleteClick(delId, delName, delType) {
            selectedId = delId;
            selectedType = delType;
            $('#confirmMessage').html('Bạn có chắc chắn xóa: ' + unescape(delName) + '?');
        }

        function deleteItem() {
            $.ajax({
                type: "POST",
                url: "List.aspx/DeleteTicket",
                data: JSON.stringify({ Id: selectedId }),
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function () {
                    $('#LoadButton').click();
                },
                failure: function (errMsg) {
                    alert(errMsg);
                }
            });
        }

        $(function () {
            $("#menu-instant").addClass("active");
            $("#menu1-instant").addClass("collapse in");
            $("#instant-ticket").addClass("active");

            $("#dateCreatedFrom").calendar({ timeSeparators: null });
            $("#dateCreatedTo").calendar({ timeSeparators: null });

            LoadTickets();
        });
    </script>
    
    <script type="text/javascript">
        function LoadTickets() {
            $('#TicketsContainer').jtable({
                paging: true,
                pageSize: 15,
                sorting: true,
                defaultSorting: 'CreatedDate DESC',
                actions: {
                    listAction: 'List.aspx/Search'
                },
                fields: {
                    Id: {
                        key: true,
                        create: false,
                        edit: false,
                        list: false
                    },
                    Code: {
                        title: '<%=GlobalStrings.TicketNumber %>',
                        width: '5%',
                        display: function (data) {
                            return '<a title="Cập nhật" href="Edit.aspx?id=' + data.record.Id + '">'+ data.record.Code + '</a>';
                        }
                    },
                    TicketContent: { title: '<%=GlobalStrings.Content %>', sorting: false },
                    CreatedDate: {
                        title: '<%=GlobalStrings.ReceivedDate %>',
                        type: 'date',
                        displayFormat: 'dd/mm/yy',
                        width: '7%'
                    },
                    CreatedTimeString: {
                        title: '<%=GlobalStrings.ReceivedHour %>',
                        sorting: false,
                        width: '5%'
                    },
                    EmployeeName: { title: '<%=GlobalStrings.ReceivedEmployee %>' },
                    CustomerName: { title: '<%=GlobalStrings.Customers %>' },
                    Phone: { title: '<%=GlobalStrings.Phone %>', width: '7%' },
                    Address: { title: '<%=GlobalStrings.Address %>' },
                    //Distance: { title: '<%=GlobalStrings.Distance %>', sorting: false },
                    //Amount: { title: '<%=GlobalStrings.Amount %>', sorting: false },
                    //StatusName: { title: '<%=GlobalStrings.Status %>', sorting: false },
                    Edit: {
                        title: '',
                        width: '1%',
                        sorting: false,
                        display: function (data) {
                            return '<a title="Cập nhật" href="Edit.aspx?id=' + data.record.Id + '"><i class="fa fa-2x fa-edit"></i></a>';
                        }
                    }
                    //,Delete: {
                    //    sorting: false,
                    //    title: '',
                    //    width: '1%',
                    //    display: function (data) {
                    //        return '<a title="Xóa" href="#" onclick="deleteClick(' + data.record.Id + ',\'' + escape(data.record.TicketContent) + '\', 1)" data-toggle="modal" data-target="#myModal"><i class="fa fa-2x fa-trash-o"></i></a>';
                    //    }
                    //}
                }
            });

            // enters
            $('#code').keypress(function (e) {
                if (e.which == 13) {
                    e.preventDefault();
                    $('#LoadButton').click();
                }
            });

            //Re-load records when user click 'load records' button.
            $('#LoadButton').click(function (e) {
                e.preventDefault();
                var status = $('#status').val();
                if (status == 0) {
                    status = [];
                } else {
                    status = [$('#status').val()];
                }
                $('#TicketsContainer').jtable('load',
                {
                    search: {
                        Status: status,
                        Code: $('#code').val(),
                        CreatedDateFromString: $('#dateCreatedFrom').val(),
                        CreatedDateToString: $('#dateCreatedTo').val()
                    }
                });
            });

            // Reset button
            $('#ResetButton').click(function (e) {
                e.preventDefault();
                $('#code').val('');
                $('#status').val('0');
                $('#dateCreatedFrom').val('');
                $('#dateCreatedTo').val('');
                $('#LoadButton').click();
            });

            $('#LoadButton').click();
        }
    </script>
</asp:Content>
